<template>
	<view class="page-box">
		<scroll-view class="scroll-box" scroll-y>
			<view class="scroll-content">
				<view class="viewa" v-for="(item, index) in details" :key="index">
					<view class="goodsInfo">
						<image :src="item.goods_img" mode="aspectFit" class="goodsImage"></image>
						<view class="goods-right">
							<view class="goodsDes">{{item.goods_name}}</view>
							<view class="goodsSize">{{item.sku_name}}</view>
						</view>
					</view>
					<view class="row">
						<view class="art-words">评价星级</view>
						<view class="content">
							<block v-for="(star, i) in item.star">
								<image v-if="star" @click="tapStar(index,i)" class="star" :key="i"
									src="/static/images/redStar.png" mode="aspectFit"></image>
								<image v-else @click="tapStar(index,i)" class="star" :key="i"
									src="/static/images/transStar.png" mode="aspectFit"></image>
							</block>
							<view class="result">{{item.star_type}}</view>
						</view>
					</view>
					<view class="area">
						<textarea maxlength="100" placeholder="请为该商品做出评价(100字以内)" v-model="item.evaluate" class="remark"
							:always-embed="true" placeholder-class="pl" cursor-spacing="0"></textarea>
					</view>
					<view class="choose">
						<!-- 展示图片 -->
						<view class="showImg" v-for="(img, i) in item.images" :key="i">
							<image class="chooseImg" :src="img" mode="aspectFit"></image>
							<!-- 删除按钮 -->
							<view class="delete">
								<image class="deleteIcon" @tap.stop="removeImage" :data-index="index" :data-i="i"
									src="/static/images/delete.png"></image>
							</view>
						</view>
						<view class="chooseImg" @tap.stop="chooseImage" :data-index="index"
							v-if="item.images.length <5">
							<view class="showNum">
								<view class="add">
									<image mode="aspectFit" src="/static/images/add-icon.png"></image>
								</view>
								<text class="imgNum">({{item.images.length}}/5)</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 发布按钮 -->
		<view @click="submit" class="submit">
			<view>发布</view>
		</view>
	</view>
</template>

<script>
	// pages/evaluate/evaluate.js
	var app = getApp().globalData;
	const uploadimg = require("../../../utils/uploadimg.js");

	export default {
		data() {
			return {
				details: [],
				imageNum: 0,
				img_upload: [],
				//上传图片的数组
				bill_id: '' //订单ID
				// stars:[] //星级选择

			};
		},

		onLoad: function(options) {
			var that = this;
			that.setData({
				bill_id: options.bill_id
			});
			this.getOrderGoods();
		},
		methods: {
			getOrderGoods: function() {
				var that = this;
				getApp().globalData.sendRequest({
					url: '/OrderEvaluate/getBillOrderGoods',
					type: 'post',
					data: {
						bill_id: that.bill_id
					},
					success: function(res) {
						if (res.status == 1) {
							var details = res.data;

							for (var i = 0; i < details.length; i++) {
								details[i].images = [];
								details[i].star = [true, true, true, true, true];
								details[i].evaluate = '';
								details[i].star_type = '非常好';
								details[i].star_val = 5;
							}

							that.setData({
								details: details
							});
						}
					}
				});
			},
			textValue: function(e) {
				var that = this;
				var nowIdx = e.currentTarget.dataset.idx;
				console.log(nowIdx);
				that.details[nowIdx].evaluate = e.detail.value;
				that.setData({
					details: that.details
				});
			},

			//提交评价
			submit() {
				this.uploadImage(0); //先进行上传图片操作
			},

			uploadImage(index) {
				var that = this;

				if (that.details[index].images.length > 0) {
					uploadimg.uploadimg({
						url: '/OrderEvaluate/evaluateImage',
						path: that.details[index].images,
						//这里是选取的图片的地址数组
						formData: {},
						callback_data: index,
						name: 'evaluate_img',
						res_name: 'evaluate_img_id'
					}, that.callback);
				} else {
					that.callback('', index);
				}
			},

			callback(res, index) {
				console.log(res, index);
				var that = this;
				that.details[index].img_id = res;
				that.setData({
					details: that.details
				});

				if (index + 1 < that.details.length) {
					this.uploadImage(index + 1);
				} else {
					//提交评价
					var allevaluate = [];

					for (var i = 0; i < that.details.length; i++) {
						var evaluate_json = {
							sell_id: that.details[i].sell_id,
							goods_id: that.details[i].goods_id,
							goods_name: that.details[i].goods_name,
							sku_id: that.details[i].sku_id,
							sku_name: that.details[i].sku_name,
							content: that.details[i].evaluate,
							stars: that.details[i].star_val,
							img_id: that.details[i].img_id
						};
						allevaluate[i] = evaluate_json;
						console.log(allevaluate);
					}

					getApp().globalData.sendRequest({
						url: '/OrderEvaluate/userReleaseEvaluate',
						data: {
							bill_id: that.bill_id,
							evaluate_json: JSON.stringify(allevaluate)
						},
						success: function(res) {
							if (res.status == 1) {
								uni.showToast({
									title: '评价成功',
									icon: 'success',
									duration: 1000,
									success: function() {
										setTimeout(function() {
											uni.navigateBack({
												delta: 1
											});
										}, 1000);
									}
								});
							}
						}
					});
				}
			},

			tapStar: function(index, i) {
				console.log(index,i);
				var details = this.details;

				for (var m = 0; m <= 4; m++) {
					if (m <= i) {
						details[index].star[m] = true;
					} else {
						details[index].star[m] = false;
					}
				}

				var arr = ['很差', '差', '一般', '很好', '非常好'];
				details[index].star_type = arr[i];
				details[index].star_val = i + 1;
				this.setData({
					details
				});
			},
			chooseImage: function(e) {
				var that = this;
				var index = parseInt(e.currentTarget.dataset.index);
				var details = this.details;
				uni.chooseImage({
					count: getApp().globalData.roundPrice(5 - details[index].images.length),
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					// 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						console.log(res);
						var tempFilePaths = [];

						for (var i = 0; i < res.tempFiles.length; i++) {
							var tempFilesSize = res.tempFiles[i].size; //获取图片的大小

							console.log(tempFilesSize);

							if (tempFilesSize <= 5000000) {
								tempFilePaths.push(res.tempFiles[i].path);
							} else {
								uni.showToast({
									title: '图片大小不能超过5M！',
									icon: 'none'
								});
							}
						}

						details[index].images.push.apply(details[index].images, tempFilePaths);
						that.setData({
							details: details
						});
						console.log(that.details);
					}
				});
			},

			removeImage(e) {
				var that = this;
				var details = this.details;
				var index = parseInt(e.currentTarget.dataset.index); // 获取要删除的第几张图片的下标

				const i = e.currentTarget.dataset.i;
				details[index].images.splice(i, 1);
				that.setData({
					details: details
				});
			}

		}
	};
</script>
<style>
	@import "./evaluate.css";
</style>
